<template>
  <div class="find-car-from">
    <navbar :title="title" ></navbar>
<!--    <van-nav-bar title="编辑" fixed placeholder :border='false'>-->
<!--      <template #left>-->
<!--        <van-icon -->
<!--        name="arrow-left" -->
<!--        size="18" -->
<!--        @click="goback"-->
<!--        />-->
<!--      </template>-->
<!--    </van-nav-bar>-->

    <div class="car-info">
      <van-form :show-error="false">

        <van-field
          v-model="carType"
          is-link
          readonly
          name="carType"
          label="车辆信息"
          placeholder="请选择车辆类型"
          @click="jmupToBrand"
          required
          :class="isCarType?'special':''"
          class="special-padding"
          size="large"
        />

        <van-field
        label="联系电话"
        placeholder="请输入电话号码"
        :required="true"
        type="tel"
        v-model="findCarFrom.contactWay"
        name="phone"
        :rules="[{ validator, message: '请输入正确手机号' }]"
        :class="isActive?'special':''"
        class="special-padding"
        size="large"
        ></van-field>

        <!--  -->

        <div class="special-font" >
          <span >备注</span>
        </div>


        <van-field
        name="remark"
        placeholder="请输入相关备注信息"
        type="textarea"
        :autosize="{minHeight: 100}"
        v-model="findCarFrom.remark"
        size="large"
        class="remark"
        ></van-field>

        <!-- <textarea placeholder="请输入相关备注信息" class="remark"></textarea> -->

        <div class="but">
          <van-button  block type="info" @click="Submit" color="#FFDD00">提交</van-button>
        </div>
      </van-form>

    </div>

  </div>
</template>

<script>
  import { areaList } from '../../../node_modules/@vant/area-data'
  import { getFindForm } from './api'

  export default{
    data() {
      return {
        title:"车辆信息",
        loading: false,
        columns: [],
        show: false,
        carTypeShow:'',
        findCarFrom: {
          brand: '', // 车品牌名称
          carModels: '', // 车型
          contactWay: '',  // contactWay 联系方式
          remark: '', // 备注
          vnId: '', // 品牌id
          vtdId: '' // 车型id
        },
        carType: '',
        showArea: false,
        areaList,
        value: '',
        showPicker: false,
        isActive: false,
        isCity: false,
        isCarType: false,

      }
    },
    methods: {
      // 校验函数返回 true 表示校验通过，false 表示不通过
      validator(val) {
        //手机号验证正则
        const tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if(val != '' && tel.test(val)) {
          this.isActive = false
          return true
        } else {
          this.isActive = true
          return false
        }
      },
      // tabbar的左箭头跳转路由
      goback() {
        this.$router.go(-1)
      },
      // 跳转到品牌选择页面
      jmupToBrand(){
        this.$router.push({
          name: 'SelectBrand'
        })
      },
      // 提交表单
      async Submit() {
        let someInfo = this.$route.query
        this.findCarFrom.brand = someInfo.brand
        this.findCarFrom.carModels = someInfo.carType
        this.findCarFrom.vnId = someInfo.vnid
        this.findCarFrom.vtdId = someInfo.vtdId
        // console.log('提交',this.findCarFrom)
        const {data} = await getFindForm(this.findCarFrom)
        // console.log(data)
      },
    },
    created() {
    },
    mounted() {
      // 背景颜色
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
      console.log(this.$route.query)
      this.carType = this.$route.query.carType
    }
  }
</script>


<style lang="less">
  .van-cell--large .van-cell__title{
    color: #666666;
    font-family: PingFangSC-Regular, PingFang SC ;
    font-weight: 400;
    font-size: 16px;
  }
  .van-field__control{
    font-size: 16px;
  }
  .van-picker__confirm {
    color: #F6C401 !important;
  }
  .van-picker__cancel, .van-picker__confirm{
    font-size: 16px !important;
  }
</style>
<style scoped lang="less">
  .find-car-from{
    background-color: #F8F8F8;
    width: 100%;
    // display: fixed;
  }
  .special-padding{
    padding: 20px 16px !important;
  }
  .remark{
    border: none;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3B3B3;
    padding: 0 16px;
    height: 100px;
    width: 100%;
  }
  .special-font{
    padding: 16px 16px 0 16px;
    background-color: white;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .special{
    border: 1px solid red;
  }
  .car-info{
    .van-cell--required::before{
      left: 23vw !important;
      font-size: 16px;
    }
    .but{
      margin: 20px 12px;
      .van-button{
        color: black !important;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
</style>
